<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12.v-model记事本案例</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg"> <input type="button" value="添加到记事本" @click="add">
    <hr>
    <ul>
        <li v-for="item,index in lists">{{item}}    <a href="#" @click="del(index)">删除</a> </li>
    </ul>
    <hr>
    <span>总数量：{{lists.length}} 条</span> <input type="button" value="删除所有" @click="delAll">
</div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"",
            lists:["java","c","c++"]
        },
        methods: {
            add(){ //从文本框添加到数组
                if(this.msg == ""){
                    alert("输入内容不能为空");
                    return
                }
                this.lists.push(this.msg);
                this.msg = "";
            },
            del(index){  //删除某一行数据
                this.lists.splice(index, 1); //代表从index开始删1个元素，也即删index索引处的元素
            },
            delAll(){   //删除所有数据
                this.lists = [];
            }
        }
    })
</script>
</body>
</html>